import React, { useState, useEffect } from "react";
import Crumbs from "../../components/crumbs/index";
import "./sass/orderTool.scss";
import { Tabs, Select, Upload, message, Button } from "antd";
import { importsExcel, exportExcel } from "./ex.js";
const { Option } = Select;

function handleChange(value) {
  console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
}
const { TabPane } = Tabs;
function callback(key) {
  console.log(key);
}

// 组件
const OrderTool = (props) => {
  const [header, ActioHeader] = useState([
    {
      title: "编号",
      dataIndex: "id",
      key: "id",
      className: "text-monospace",
    },
    {
      title: "用户名称",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "用户年龄",
      dataIndex: "userage",
      key: "userage",
    },
  ]);

  const [excelList, actionExcelList] = useState([
    { id: 1, username: "leson", userage: 18 },
    {
      id: 2,
      username: "lulu",
      userage: 30,
    },
    {
      id: 3,
      username: "beibei",
      userage: 19,
    },
  ]);
  const [list, actionList] = useState([]);
  const [excel, setExcel] = useState([]);
  // 面包屑
  const [CrumbsList] = useState([
    {
      name: "订单管理",
    },
    {
      name: "工具",
      url: "/orderTool",
    },
  ]);
  function excelFun() {
    if (excel.length) {
      actionList(excel);
    } else {
      alert("请选择文件");
    }
  }
  return (
    <div className="OrderTool">
      <Crumbs CrumbsList={CrumbsList} />
      <div>
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="批量发货" key="1">
            <div className="brief">
              <p>批量发货</p>
              <p> 功能介绍: 使用excel快速导入进行订单发货</p>
              <p> 如重复导入数据将以最新导入数据为准，请谨慎使用</p>
              <br />
              <p> 数据导入订单状态自动修改为已发货</p>
              <br />
              <p>
                一次导入的数据不要太多,大量数据请分批导入,建议在服务器负载低的时候进行
              </p>
              <p>使用方法:</p>
              <p>1. 下载Excel模板文件并录入信息</p>
              <br />
              <p> 2. 选择快递公司 </p>
              <br />
              <p> 3. 上传Excel导入 </p>
              <br />
              <p>
                格式要求：
                Excel第一列必须为订单编号，第二列必须为快递单号，请确认订单编号与快递单号的备注
              </p>
            </div>
            <div className="select">
              <span className="name">快递公司</span>
              <Select
                labelInValue
                defaultValue={{ value: "顺丰" }}
                style={{ width: 200 }}
                onChange={handleChange}
              >
                <Option value="顺丰">顺丰</Option>
                <Option value="京东">京东</Option>
                <Option value="中通">中通</Option>
                <Option value="圆通">圆通</Option>
              </Select>
            </div>
            {/* <div>
              表格
              {list.length
                ? list.map((item) => {
                    return <div key={item.id}>{item.id}</div>;
                  })
                : ""}
            </div> */}
            <div className="select">
              <span className="name">Excel</span>
              <input
                type="file"
                accept=".xls,.xlsx"
                onChange={async (e) => {
                  let a = await importsExcel(e);
                  if (a.length) {
                    setExcel(a);
                  }
                }}
              />
            </div>
            <div className="foot_btn">
              <Button type="primary" onClick={() => excelFun()}>
                导入
              </Button>

              <Button
                onClick={() => {
                  exportExcel(header, excelList, "学生信息.xlsx");
                }}
                className="down"
              >
                下载Excel模板文件
              </Button>

              <Button type="primary" danger>
                取消
              </Button>
            </div>
          </TabPane>
          <TabPane tab="订单自定义到处" key="2">
            订单自定义到处
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
};

export default OrderTool;
